<template>
  <div class="singer-intro">
    <div v-for="(item, index) in topicDataItem" :key="index">
      <h2>{{ item.title }}</h2>
      <img :src="item.rectanglePicUrl" />
      <div style="white-space: pre-wrap">{{ item.topic.startText }}</div>
      <hr />
      <div style="white-space: pre-wrap">{{ item.topic.summary }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["singerId"],
  data() {
    return {
      topicDataItem: [],
      contentItem: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$request("get", "/artist/desc", {
        id: this.singerId,
      }).then((res) => {
        console.log(res);
        this.topicDataItem = res.topicData;
      });
    },
  },
};
</script>
<style scoped>
.singer-intro {
  text-align: left;
  padding: 0 1rem;
}
.singer-intro > div > img {
  width: 100%;
  height: 100%;
  padding: 0 1rem;
}
</style>
